<template>
  <div class="je-rbac-saas-role-authorization-lefttree">
    <tree
      ref="treeview"
      class="role-treeview"
      :tree-config="{
        trigger: 'cell-dblclick',
        rowField: 'id',
        parentField: 'parent',
        checkbox: true,
      }"
      :loading="loading"
      size="mini"
      :data="treeData"
      @current-change="handlerSelect"
    >
      <template #nodeIcon="{ row }">
        <i
          v-if="row.bean.ROLE_TYPE_CODE === 'folder' && row.children.length === 0"
          class="is--folder fas fa-folder"
        ></i>
      </template>
    </tree>
  </div>
</template>

<script>
  import { defineComponent, ref, onMounted } from 'vue';
  import { Tree } from '@jecloud/ui';
  import { findProductRoleTree } from '@/api/index';
  export default defineComponent({
    name: 'AasaLeftTree',
    components: { Tree },
    props: {
      productId: String,
    },
    emits: ['getLeftTreeChecked'],
    setup(props, { emit }) {
      const treeview = ref();
      const loading = ref(true);
      const treeData = ref();
      const getTreeData = () => {
        loading.value = true;
        findProductRoleTree({ productId: props.productId }).then((data) => {
          treeData.value = data.children;
          loading.value = false;
        });
      };
      // 初始化数据
      onMounted(() => {
        // 加载权限数据
        getTreeData();
      });
      const handlerSelect = ({ newValue }) => {
        debugger;
        emit('getLeftTreeChecked', { id: newValue?.id || '' });
      };
      return { treeview, handlerSelect, loading, treeData };
    },
  });
</script>

<style lang="less" scoped>
  .je-rbac-saas-role-authorization-lefttree {
    height: 100%;
    .role-treeview {
      :deep(.vxe-table--render-wrapper) {
        border-left: 1px solid #e6e6e6;
        border-right: 1px solid #e6e6e6;
      }
      :deep(.ant-input-affix-wrapper.ant-select-selection-search-input) {
        height: 40px !important;
        border-radius: 0;
        border-color: #e6e6e6;
        &:hover {
          border: 1px solid #5c8dff;
        }
      }
      :deep(.ant-input-affix-wrapper.ant-select-selection-search-input:hover) {
        border: 1px solid #5c8dff !important;
        box-shadow: none !important;
      }
      :deep(.ant-input-affix-wrapper.ant-select-selection-search-input) {
        height: 40px !important;
        border-color: #e6e6e6 !important;
        border-radius: 0;
        .ant-input-suffix {
          .anticon.ant-input-clear-icon {
            top: 9px;
          }
        }
      }
      :deep(.ant-input-affix-wrapper-focused.ant-select-selection-search-input) {
        border: 1px solid #5c8dff !important;
        box-shadow: none !important;
      }
    }
  }
</style>
